---
title: Select
package: "@chakra-ui/select"
image: "components/select.svg"
description:
  Select component is a component that allows users pick a value from predefined
  options.
---

`Select` component is a component that allows users pick a value from predefined
options. Ideally, it should be used when there are more than 5 options,
otherwise you might consider using a radio group instead.

<ComponentLinks
  theme={{ componentName: "select" }}
  github={{ package: "select" }}
  npm={{ package: "@chakra-ui/select" }}
/>

<carbon-ad></carbon-ad>

## Import

```js
import { Select } from "@chakra-ui/react"
```

## Usage

Here's a basic usage of the `Select` component.

```jsx
<Select placeholder="Select option">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>
```

### Changing the size of the Select

The `Select` component comes in four sizes. The default is `md`.

- `xs` (`24px`)
- `sm` (`32px`)
- `md` (`40px`)
- `lg` (`48px`)

```jsx
<Stack spacing={3}>
  <Select placeholder="extra small size" size="xs" />
  <Select placeholder="small size" size="sm" />
  <Select placeholder="medium size" size="md" />
  <Select placeholder="large size" size="lg" />
</Stack>
```

### Changing the appearance of the Select

Just like the input component, `Select` comes in 4 variants, `outline`,
`unstyled` , `flushed` , and `filled`. Pass the `variant` prop and set it to
either of these values.

```jsx
<Stack spacing={3}>
  <Select variant="outline" placeholder="Outline" />
  <Select variant="filled" placeholder="Filled" />
  <Select variant="flushed" placeholder="Flushed" />
  <Select variant="unstyled" placeholder="Unstyled" />
</Stack>
```

### Changing the icon in the Select

As with most Chakra components, you can change the arrow icon used in the
select. Simply pass the `icon` prop.

In case the custom icon size doesn't look right, you can pass the `iconSize`
prop to change it.

```jsx
<Select icon={<MdArrowDropDown />} placeholder="Woohoo! A new icon" />
```

### Overriding the styles of the Select

Even though the select comes with predefined styles, you can override pretty
much any property. Here we'll override the background color.

```jsx
<Select
  bg="tomato"
  borderColor="tomato"
  color="white"
  placeholder="Woohoo! A new background color!"
/>
```

## Props

The Select component composes [Box](/docs/layout/box) so you can pass all `Box`
props, and native `Select` props in addition to these:

<PropsTable of="Select" />
